<script lang="ts" setup>
import { getHomeListAPI, getRecommendListAPI } from '@/API/home'
import { ref, onMounted } from 'vue'

import { useRouter } from 'vue-router'
// import { showToast } from 'vant'
const router = useRouter()
//轮播图数据
const bannerList = ref<any>([])
const getHomeList = async () => {
  const res = await getHomeListAPI()
  bannerList.value = res.data.banners
}
// 猜你喜欢数据
const start = ref(0)
const total = ref(0)

const recommendList = ref<any>([])

const getRecommendList = async () => {
  const res = await getRecommendListAPI(1, start.value)
  start.value = res.data.nextIndex
  total.value = res.data.total
  if (refreshing.value) {
    recommendList.value = [...res.data.list]
  } else {
    recommendList.value = [...recommendList.value, ...res.data.list]
  }
  
  
  refreshing.value = false
  loading.value = false

  finished.value = res.data.isEnd
}

//下拉和刷新的属性
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

//上拉加载成功
const onLoad = () => {
  getRecommendList()
  
}
//下拉刷新
const onRefresh = async () => {
  

  start.value = 0
  finished.value = false

  //recommendList数据列表为空时，会触发onLoad函数
  // recommendList.value = []
  await getRecommendList()
}

// 宫格数据
const grids = ref<{ img: string; title: string }[]>([
  {
    img: getImageUrl('chaoshi'),
    title: '嗨购超市'
  },
  {
    img: getImageUrl('dianqi'),
    title: '嗨购电器'
  },
  {
    img: getImageUrl('fushi'),
    title: '服饰美妆'
  },
  {
    img: getImageUrl('shengxian'),
    title: '嗨购生鲜'
  },
  {
    img: getImageUrl('daojia'),
    title: '嗨购到家'
  },
  {
    img: getImageUrl('chongzhi'),
    title: '充值中心'
  },
  {
    img: getImageUrl('fujin'),
    title: '附近好店'
  },
  {
    img: getImageUrl('plus'),
    title: '嗨购会员'
  },
  {
    img: getImageUrl('guoji'),
    title: '嗨购国际'
  },
  {
    img: getImageUrl('paimai'),
    title: '嗨购拍卖'
  }
])

/**
 * 查询宫格图片
 */
function getImageUrl(name: string) {
  return new URL(`../../assets/${name}.png`, import.meta.url).href
}
onMounted(() => {
  getHomeList()
})
</script>

<template>
  <div class="home">
    <!-- 头部搜索框 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-search show-action label="嗨购" placeholder="请输入搜索关键词" background="#f00" shape="round" @click="router.push('/detail')">
        <template #left>
          <van-icon name="wap-nav" size="24" color="#fff" @click.stop="router.push('/category')" />
        </template>
        <template #action>
          <div @click.stop="router.push('/login')" style="color: #fff">登录</div>
        </template>
      </van-search>

      <!-- 轮播 -->
      <van-swipe :autoplay="3000" class="banner-swiper">
        <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
          <img :src="item.image" style="width: 100%; height: 100%" />
        </van-swipe-item>
      </van-swipe>

      <!-- 宫格 -->
      <van-grid column-num="5" :border="false" icon-size="36" clickable>
        <van-grid-item v-for="(grid, index) in grids" :key="index" :icon="grid.img" :text="grid.title" />
      </van-grid>

      <van-list v-model:loading="loading" :finished="finished" offset="100" finished-text="没有更多了" @load="onLoad">
        <van-divider>猜你喜欢</van-divider>
        <van-row>
          <van-col span="12" v-for="prod in recommendList" :key="prod.id">
            <div class="prod-item">
              <div class="image">
                <img @click="router.push(`/detail/${prod.id}`)" :src="prod.image" alt="" style="width: 100%; height: 100%" />
              </div>
              <div class="title van-multi-ellipsis--l2">{{ prod.title }}</div>
              <div class="price">
                <span class="sale-price">{{ prod.originprice?.toFixed(2) }}</span>
                <span class="origin-price"> {{ prod.price.toFixed(2) }} </span>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-list>
    </van-pull-refresh>

    <!-- 返回顶部 -->
  </div>
</template>

<style scoped lang="less"></style>
